<html xmlns="http://www.w3c.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<h:head>
	<style type="text/css">
/* tamaño de fuente base */
.ui-widget .ui-widget {
	font-size: 13px;
}
/*titulo de panel*/
.panel {
	border: none !important;
	width: 1024px !important;
}
/*tabla gris*/
table.borde2 {
	border-collapse: collapse;
	background-color: #EEEAE9;
	font-size: 11px;
}
/*centrar botones*/
.centrar {
	margin: 0 auto;
}

/*celdas con borde blanco*/
td.borde1 {
	border: 1px solid white;
}
/*celdas blancas con borde gris*/
td.borde2 {
	border: 1px solid #EEEAE9;
	background-color: white;
}
/*estilo paginador*/
.ui-widget-header {
	border: none !important;
	background: none !important;
	color: black !important;
	text-align: right !important;
}
/*color letra botones*/
.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default
	{
	color: black !important;
}
/*borde botones*/
.ui-button-text-only {
	border: 3px solid #000000 !important;
}
/*bordes de los botones*/
.ui-corner-all {
	border-radius: 0px !important;
}
/* espaciado en encabezado de datatable*/
.ui-datatable th {
	white-space: normal !important;
}
/*ubicacion de icono de sort en las datatable*/
.ui-datatable .ui-sortable-column-icon {
	position: static !important;
}
/*ubicacion de icono de sort en las datatable*/
td.sort {
	font-weight: bold !important;
	text-align: center !important;
}
/*tamaño fuente input autocomplete*/
.ui-autocomplete-input {
	font-size: 11px !important;
}
/*tamaño fuente items autocomplete*/
.ui-autocomplete-panel .ui-autocomplete-list-item {
	font-size: 11px !important;
}
/*tamaño fuente datatable*/
.ui-datatable table {
	font-size: 11px !important;
}
/*tamaño de letra de los calendarios*/
#ui-datepicker-div {
	font-size: 11px !important;
}
/*Cambio de icon para el calendario*/
.ui-icon-calendar{
	background-position:center !important;
}
.ui-icon{
	width:16px;
	height:16px;
	background-image:url("/InicialMultiabonos/faces/images/PYME_img_calendario.png") !important;
}
</style>
</h:head>
<h:body>

	<p:panel styleClass="panel">
		<p style="font-size: 11px">
			<h:outputLabel value="#{msg.bienvenido}:" />
			<b><h:outputLabel value="#{msg.senor}:" /></b>
		</p>
		<table width="100%" style="font-size: 15px">
			<tbody>
				<tr>
					<td>
						<p style="color: #A81918; font-weight: bold;">
							<h:outputLabel value="#{msg.consultaDispersionMultiabonos}:" />
						</p>
					</td>

					<td align="right"><b>--Fecha--</b></td>
				</tr>
			</tbody>
		</table>
		<br />
		<p:panel style="border:none !important;">
			<table class="borde2" width="100%">
				<tbody>
					<tr>
						<td colspan="2"><b><h:outputLabel value="#{msg.seleccioneOpcion}"/></b></td>
					</tr>
					<tr>
						<td class="borde1"><h:outputLabel for="fechaInicio"
								value="#{msg.fechaInicialConsulta}" /></td>
						<td class="borde2"><p:calendar value="#{calendarBean.date3}"
								id="fechaInicio" showOn="button" /></td>
						<td class="borde1"><h:outputLabel for="fechaFin"
								value="#{msg.fechaFinalConsulta}" /></td>
						<td class="borde2"><p:calendar value="#{calendarBean.date3}"
								id="fechaFin" showOn="button" /></td>
					</tr>
					<tr>
						<td class="borde1"><h:outputLabel for="codigo-unico"
								value="#{msg.codigoUnico}" /></td>
						<td class="borde2"><h:selectOneMenu id="codigo-unico"
								value="#{pprBean.firstname}">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{pprBean.cities}" />
							</h:selectOneMenu></td>
						<td colspan="2" class="borde1"></td>
					</tr>
					<tr>
						<td class="borde1"><h:outputLabel for="tcc"
								value="#{msg.tipoCuentaComercio}" /></td>
						<td class="borde2"><h:selectOneMenu id="tpd"
								value="#{pprBean.firstname}">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{pprBean.cities}" />
							</h:selectOneMenu></td>
						<td class="borde1"><h:outputLabel for="ncc"
								value="#{msg.cuentaComercio}" /></td>
						<td class="borde2"><h:selectOneMenu id="ncc"
								value="#{pprBean.firstname}">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{pprBean.cities}" />
							</h:selectOneMenu></td>
					</tr>
					<tr>
						<td class="borde1"><h:outputLabel for="fr" value="#{msg.franquicia}" />
						</td>
						<td class="borde2"><h:selectOneMenu id="fr"
								value="#{pprBean.firstname}">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{pprBean.cities}" />
							</h:selectOneMenu></td>
						<td class="borde1"><h:outputLabel for="ed"
								value="#{msg.empresaDestino}" /></td>
						<td class="borde2"><h:selectOneMenu id="ed"
								value="#{pprBean.firstname}">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{pprBean.cities}" />
							</h:selectOneMenu></td>
					</tr>
					<tr>
						<td class="borde1"><h:outputLabel for="tpd"
								value="#{msg.tipoProductoDestino}" /></td>
						<td class="borde2"><h:selectOneMenu id="tpd"
								value="#{pprBean.firstname}">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{pprBean.cities}" />
							</h:selectOneMenu></td>
						<td class="borde1"><h:outputLabel for="npd"
								value="#{msg.numeroProductoDestino}" /></td>
						<td class="borde2"><h:selectOneMenu id="npd"
								value="#{pprBean.firstname}">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{pprBean.cities}" />
							</h:selectOneMenu></td>
					</tr>
					<tr>
						<td class="borde1"><h:outputLabel for="nit" value="#{msg.nit}" /></td>
						<td class="borde2"><h:selectOneMenu id="nit"
								value="#{pprBean.firstname}">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{pprBean.cities}" />
							</h:selectOneMenu></td>
						<td class="borde1"><h:outputLabel for="usr" value="#{msg.usuario}" />
						</td>
						<td class="borde2"><h:selectOneMenu id="usr"
								value="#{pprBean.firstname}">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{pprBean.cities}" />
							</h:selectOneMenu></td>
					</tr>
					<tr>
						<td class="borde1"><h:outputLabel for="ed" value="#{msg.estado}" />
						</td>
						<td class="borde2"><h:selectOneMenu id="ed"
								value="#{pprBean.firstname}">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{pprBean.cities}" />
							</h:selectOneMenu></td>
						<td class="borde1"><h:outputLabel for="nv" value="#{msg.novedad}" />
						</td>
						<td class="borde2"><h:selectOneMenu id="nv"
								value="#{pprBean.firstname}">
								<f:selectItem itemLabel="Select One" itemValue="" />
								<f:selectItems value="#{pprBean.cities}" />
							</h:selectOneMenu></td>
					</tr>
				</tbody>
			</table>
			<br />
			<h:panelGrid columns="1" styleClass="centrar">
				<p:button value="#{msg.buscar}" style="font-size: 11px"></p:button>
			</h:panelGrid>
			<br />
			<p:dataTable id="cars" var="car" resizableColumns="true"
				value="#{tableBean.datamodel}" paginator="true"
				paginatorPosition="bottom" rows="10"
				paginatorTemplate="#{msg.irPagina} {JumpToPageDropdown}">
				<!-- currentPageReportTemplate="primero {startRecord} ultimo {endRecord} total {totalRecords}" -->

				<p:column headerText="#{msg.fechaDispersion}" sortBy="#{car.year}">
					<h:outputText value=" " />
				</p:column>
				<p:column headerText="#{msg.codigoUnico}" sortBy="#{car.year}">
					<h:outputText value=" " />
				</p:column>
				<p:column headerText="#{msg.franquicia}" sortBy="#{car.year}">
					<h:outputText value=" " />
				</p:column>
				<p:column headerText="#{msg.tipoCuentaComercio}" sortBy="#{car.year}">
					<h:outputText value=" " />
				</p:column>
				<p:column headerText="#{msg.cuentaComercio}" sortBy="#{car.year}">
					<h:outputText value=" " />
				</p:column>
				<p:column headerText="#{msg.tipoDispersion}" sortBy="#{car.year}">
					<h:outputText value=" " />
				</p:column>
				<p:column headerText="#{msg.valorDispersionDavivienda}"
					sortBy="#{car.year}">
					<h:outputText value=" " />
				</p:column>
				<p:column headerText="#{msg.valorDispersionCliente}" sortBy="#{car.year}">
					<h:outputText value=" " />
				</p:column>
				<p:column headerText="#{msg.nitDestino}" sortBy="#{car.year}">
					<h:outputText value=" ." />
				</p:column>
				<p:column headerText="#{msg.tipoProductoDestino}" sortBy="#{car.year}">
					<h:outputText value=" " />
				</p:column>
				<p:column headerText="#{msg.numeroProductoDestino}" sortBy="#{car.year}">
					<h:outputText value=" " />
				</p:column>
				<p:column headerText="#{msg.estado}" sortBy="#{car.year}">
					<h:outputText value=" " />
				</p:column>
				<p:column headerText="#{msg.novedad}" sortBy="#{car.year}">
					<h:outputText value=" " />
				</p:column>
				<p:column headerText="#{msg.usuario}" sortBy="#{car.year}">
					<h:outputText value=" " />
				</p:column>
			</p:dataTable>

		</p:panel>
		<h:panelGrid columns="1" styleClass="centrar">
			<p:button value="#{msg.siguiente}" style="font-size: 11px"></p:button>
		</h:panelGrid>
		<br />

		<h:panelGrid columns="2" styleClass="centrar">
			<p:button value="#{msg.imprimir}" style="font-size: 11px"></p:button>
			<p:button value="#{msg.guardar}" style="font-size: 11px"></p:button>
		</h:panelGrid>
		<br />


	</p:panel>

</h:body>
</html>